import React, { useCallback, useMemo, useState } from "react";
import styles from "../Login/style.module.scss";
import cn from "classnames";
import { FormattedMessage } from "react-intl";
import EditPages from "../Admin/Component/ResourceList/Edit";
import { LibAppView } from "@/lib";
import { formatPassword } from "@/lib/utils";

export const JourneyApp = LibAppView.createApp({
    name: "HomePageAppJourney"
});
const Registe = LibAppView.withService({
    reqEndPoints: [{
        endPoint: "login.config",
        name: "config"
    }]
})((props) => {
    const [ showLoading ] = useState(false);
    const app = LibAppView.useApp();
    const configData = useMemo(() => {
        console.log(props.responseData);
        return {
            publicKey: (props.responseData as any)?.config?.data?.publicKey,
            encrypt: (props.responseData as any)?.config?.data?.encrypt,
            website: (props.responseData as any)?.config?.data?.website || {}
        };
    }, [props.responseData]);
    const formColumns = useMemo<any[]>(() => {
        return [
            {
                name: "loginName",
                label: "登录名",
                type: "Input",
                required: true
           },{
                name: "userName",
                label: "用户名",
                type: "Input",
                required: true
           },
           {
                name: "password",
                label: "密码",
                type: "Input",
                required: true,
                props: {
                    type: "password"
                }
           }, {
                name: "confirmPassword",
                label: "确认密码",
                type: "Input",
                required: true,
                props: {
                    type: "password"
                },
                rules: [{
                    required: true,
                    message: "重复密码不能为空。"
                },{
                    validator: (rule: any, value: any, callback: any, form: any) => {
                        console.log( value, form.getFieldValue("password"))
                        if (value !== form.getFieldValue("password")) {
                            callback(new Error("两次输入密码不一致"));
                        } else {
                            callback();
                       }
                    }
                }]
           }, {
                name: "mobile",
                label: "手机号码",
                type: "Input"
           }, {
                name: "company",
                label: "公司名称",
                type: "Input"
           }, {
                name: "region",
                label: "所属城市",
                type: "JSCity",
                required: true
           }
        ];
    }, []);

    return <div className={styles.login}>
        <section className={cn(styles.loginPcForm, styles.registeForm, showLoading && styles.loginHideInputForm)}>
            <div>
                <section className={styles.loginInputForm}>
                    <header>
                        <FormattedMessage id="admin.registe.title" defaultMessage="Registe" />
                    </header>
                    <section>
                        <div className={styles.clearFix}>
                            <EditPages 
                                minHeight="auto"
                                submitEndPoint={"login.registe"}
                                submitText="注册"
                                backHidden
                                fields={formColumns}
                                successMessage="注册成功，请登录"
                                onSubmitSuccess={() => {
                                    app.goto("home.login");
                                }}
                                labelCol={5}
                                wrapperCol={17}
                                overrideRight
                                buildRequest={(formData: any) => {
                                    return {
                                        ...formData,
                                        province: "320000",
                                        city: formData.region[1],
                                        area: null,
                                        password: formatPassword(formData.password, configData.publicKey,configData.encrypt),
                                        confirmPassword: formatPassword(formData.confirmPassword, configData.publicKey, configData.encrypt),
                                    }
                                }}
                            />
                        </div>
                        
                    </section>
                </section>
            </div>
        </section>
        <div className={cn(styles.lodingSpinner, showLoading && styles.loginLoadingActive)}></div>
    </div>;
});

export default () => {
    return <JourneyApp.Provider>
        <Registe />
    </JourneyApp.Provider>
};
